<template>
  <div class="content">
    <div class="breadcrumb" :gutter="24">
      {{$t('model.model_ret')}}{{modelName}}
    </div>

    <el-form ref="form" label-width="70px" size="small">
      <el-row :gutter="28">

        <div class="btngroup">
          <el-button type="primary" size="small" @click="handleAdd()">{{ $t("model.sel_model") }}</el-button>
          <el-button type="primary" size="small" @click="saveFactor()" :disabled="modelName == ''">{{ $t("model.new_recipe") }}</el-button>
        </div>
      </el-row>
    </el-form>

    <el-tabs v-model="activeName" tab-position="left" type="border-card" :style="{height:'530px'}" v-if="modelName">
      <!-- <el-tab-pane :label="$t('model.nihepinggu')" name="item1">
        <modelResultNhpg />
      </el-tab-pane>
      <el-tab-pane :label="$t('model.canchafenxi')" name="item2">
        <modelResultCcfx :tableData="tableData" />
      </el-tab-pane>

      <el-tab-pane :label="$t('model.canshuguji')" name="item3">
        <modelResultCsgj :tableData="tableData" >
        </modelResultCsgj>
      </el-tab-pane>
      <el-tab-pane :label="$t('model.nihegongshi')" name="item4">
        <modelResultNhgs :tableData="tableData" >
        </modelResultNhgs>
      </el-tab-pane> -->
      <el-tab-pane :label="$t('model.nihepinggu')" name="item1">
        <modelResultNhpg :tableData="modelRet.stats">
        </modelResultNhpg>
      </el-tab-pane>
      <el-tab-pane :label="$t('model.canchafenxi')" name="item2">
        <modelResultCpp :tableData="modelRet.resid">
        </modelResultCpp>
      </el-tab-pane>

      <el-tab-pane :label="$t('model.canshuguji')" name="item3">
        <modelResultCpp :tableData="modelRet.param_info">
        </modelResultCpp>
      </el-tab-pane>

      <el-tab-pane :label="$t('model.nihegongshi')" name="item4">
        <modelResultCpp :tableData="modelRet.model_expr">
        </modelResultCpp>
      </el-tab-pane>

      <el-tab-pane :label="$t('model.zuiyouzuhewu')" name="item6">
        <modelResultCpp :tableData="modelRet.cpp_optim">
        </modelResultCpp>
      </el-tab-pane>
      <el-tab-pane :label="$t('model.zuiyouzuheyou')" name="item5">
        <modelResultCpp :tableData="modelRet.cpp_optim_cons" ref="modelRetCpp">
        </modelResultCpp>
      </el-tab-pane>
      <el-tab-pane :label="$t('model.mubiaozuiyouwu')" name="item8">
        <modelResultCpp :tableData="modelRet.obj_optim" />
      </el-tab-pane>
      <el-tab-pane :label="$t('model.mubiaozuiyou')" name="item7">
        <modelResultCpp :tableData="modelRet.obj_optim_cons" />
      </el-tab-pane>

      <!-- <el-tab-pane :label="$t('model.mubiaozuiyou')" name="item7">
        <modelResultObj :tableData="tableData"  />
      </el-tab-pane>
      <el-tab-pane :label="$t('model.mubiaozuiyouwu')" name="item8">
        <modelResultObj :tableData="tableData"  />
      </el-tab-pane> -->
    </el-tabs>

    <el-dialog v-dialogDrag :title="title" :visible.sync="isShowDialog" :close-on-click-modal="false" width="60vh" class="isShowDialog"
      :before-close="handleClose">
      <el-form :model="ruleForm" label-width="80px" ref="ruleForm" size="small" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <el-col :xs="24">
            <el-form-item :label="$t('model.model_name')" prop="woId">
              <el-select v-model="ruleForm.modelName" remote filterable placeholder="" clearable @change="changeRecipeId">
                <el-option v-for="(item,index) in modelList" :key="index" :label="item.modelName" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.formula_name')" prop="recipeId">
              <el-input disabled v-model="ruleForm.recipeName" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24">
            <el-form-item :label="$t('recipe.material_code')" prop="item">
              <el-input disabled v-model="ruleForm.item" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('dialog.numbers')" prop="itemQty">
              <el-input disabled v-model="ruleForm.itemQty" placeholder="" min="0" v-enterNumber2 type="number" clearable>
                <template slot="append">{{ruleForm.uomId}}</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleAddFormula('ruleForm')">{{ $t("common.determine") }}</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

    <el-dialog v-dialogDrag :title="title" :visible.sync="isGenDialog" :close-on-click-modal="false" width="60vh" class="isGenDialog"
      :before-close="handleClose">
      <el-form :model="ruleFormGen" label-width="80px" ref="ruleFormGen" size="small" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.formula_name')" prop="recipeName">
              <el-input v-model="ruleFormGen.recipeName" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24">
            <el-form-item :label="$t('common.version')" prop="version">
              <el-input v-model="ruleFormGen.version" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24">
            <el-form-item :label="$t('basic.material_description')" prop="itemDescription">
              <el-input v-model="ruleFormGen.item" disabled placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.yield')" prop="itemQty">
              <el-input v-model="ruleFormGen.itemQty" placeholder="" :disabled="title == '复制配方'" v-enterNumber2 type="number" clearable>
                <template slot="append">{{ruleFormGen.uomId}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24">
            <el-form-item :label="$t('recipe.yield_max')" prop="itemQtyHi">
              <el-input v-model="ruleFormGen.itemQtyHi" placeholder="" :disabled="title == '复制配方'" v-enterNumber2 type="number" clearable>
                <template slot="append">{{ruleFormGen.uomId}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('recipe.yield_min')" prop="itemQtyLo">
              <el-input v-model="ruleFormGen.itemQtyLo" placeholder="" :disabled="title == '复制配方'" v-enterNumber2 type="number" clearable>
                <template slot="append">{{ruleFormGen.uomId}}</template>
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :xs="24">
            <el-form-item :label="$t('common.describe')" prop="notes">
              <el-input type="textarea" v-model="ruleFormGen.notes" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleGenFormula('ruleFormGen')">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleGenClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>

    <bg ref="bg" v-if="!modelName"></bg>
  </div>
</template>

<script>
import { modeling } from "@/api/model"
import { addFormula } from "@/api/addFormula"

import modelResultCpp from "./template/modelResultCpp.vue"
import modelResultCsgj from "./template/modelResultCsgj.vue"
import modelResultNhgs from "./template/modelResultNhgs.vue"
import modelResultCcfx from './template/modelResultCcfx.vue'
import modelResultObj from './template/modelResultObj.vue'
import modelResultNhpg from './template/modelResultNhpg.vue'
import bg from "./bg.vue"

export default {
  components: {
    modelResultCpp,
    modelResultCsgj,
    modelResultNhgs,
    modelResultCcfx,
    modelResultObj,
    modelResultNhpg,
    bg,
  },
  data () {
    return {
      activeName: "item2",
      isShowDialog: false,
      isGenDialog: false,
      title: this.$t('model.sel_model'),
      modelList: [],
      recipeList: [],
      modelRet: {},
      ruleForm: {
        recipeId: "",
        recipeName: '',
        modelName: "",
        itemQty: "",
        uomId: "",
        creator: '',
      },
      ruleFormGen: {
        recipeName: "",
        item: "",
        itemDescription: "",
        itemQty: "",
        notes: "",
        recipeStatus: 1, //默认传1
        uomId: "",
        // itemQtyLo: "",
        // itemQtyHi: "",
        trainId: '',
        recipeType: 1,
        version: '',
      },
      modelName: '',
    }
  },
  created () {
    this.getRecipeList()
    this.getModelList()
  },
  methods: {
    handleAdd () {
      this.title = this.$t('model.sel_model')
      this.ruleForm = {}
      try {
        this.$refs['ruleForm'].resetFields();
      } catch (e) { }

      this.isShowDialog = true
    },
    //获取模型项目列表
    getModelList () {
      const param = {
        page: 1,
        size: 999,
      }
      modeling.modelProjectList(param).then(res => {
        if (res.code == 200) {
          this.modelList = res.data.rows
        }
      })
    },
    getRecipeList () {
      const param = {
        page: 1,
        size: 999
      }
      addFormula.getTbrecipeList(param).then(res => {
        this.recipeList = res.data.rows
      })
    },
    handleClose () {
      this.isShowDialog = false
    },
    changeRecipeId (val) {
      let item = this.modelList.find(item => item.fid == val)

      this.ruleForm.recipeName = item.tbRecipe.recipeName

      this.ruleForm.recipeId = item.tbRecipe.fid
      this.ruleForm.itemQty = item.tbRecipe.itemQty
      this.ruleForm.item = item.item
      this.ruleForm.uomId = item.tbRecipe.uomId
      this.ruleForm.type = item.recipeStatus == 3 ? '1' : item.recipeStatus == 6 ? '2' : ''

      this.ruleFormGen.recipeId = item.tbRecipe.fid
      this.ruleFormGen.itemQty = item.tbRecipe.itemQty
      this.ruleFormGen.item = item.item
      this.ruleFormGen.uomId = item.tbRecipe.uomId
      this.ruleFormGen.type = item.recipeStatus == 3 ? '1' : item.recipeStatus == 6 ? '2' : ''
    },
    handleAddFormula (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.modelName = '->' + this.modelList.filter(ii => ii.fid == this.ruleForm.modelName)[0].modelName
          let param = Object.assign({}, this.ruleFormGen)
          param.tbRecipeVo = {
            fid: ""
          }
          this.getModelRet()

          this.isShowDialog = false
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    getModelRet () {
      let modelId = this.modelList.filter(ii => ii.fid == this.ruleForm.modelName)[0].fid
      const param = {
        projectId: modelId,
        page: 1,
        size: 999,
        field: 'createTime',
        order: 'DESC',
      }

      modeling.modelResultList(param).then(res => {
        if (res.code == 200) {
          this.modelRet = JSON.parse(res.data.rows[0].modelResult).data
        }
      })
    },
    saveFactor () {
      this.isGenDialog = true
      this.ruleFormGen.recipeName = ''
      this.title = this.$t('model.new_recipe')
    },
    handleGenFormula () {
      this.isGenDialog = false
      console.info(this.modelList, this.modelName)
      let modelNameReal = this.modelName.replace('->', '')
      let modelObj = this.modelList.filter(ii => ii.modelName == modelNameReal)[0]
      let modelId = modelObj.fid
      let recipeObj = this.recipeList.filter(ii => ii.fid == modelObj.tbRecipe.fid)[0]

      const param = {
        recipeName: this.ruleFormGen.recipeName,
        item: recipeObj.item,
        itemDescription: recipeObj.itemDescription,
        itemQty: recipeObj.itemQty,
        notes: recipeObj.notes,
        recipeStatus: 1, //默认传1
        uomId: recipeObj.uomId,
        itemQtyLo: recipeObj.itemQtyLo,
        itemQtyHi: recipeObj.itemQtyHi,
        spare1: modelId,
        recipeType: recipeObj.recipeType,
      }

      modeling.genRecipe(param).then(res => {
        if (res.code == 200) {
          this.$message.success('生成配方成功.')
        }
      })
    },
    handleGenClose () {
      this.isGenDialog = false
    },
  }
}
</script>

<style scoped>
.item {
  height: calc(100vh - 170px);
  overflow: auto;
}
.content >>> .el-tabs__content {
  padding-top: 0;
}
.content >>> .el-tabs--border-card {
  box-shadow: none;
}

.isShowDialog >>> .el-select,
.isShowDialog >>> .el-date-editor {
  width: 100%;
}

.btngroup {
  float: right;
  margin-right: 20px;
  margin-bottom: 10px;
}
</style>